博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
分页样式 和 后台
阅读量:6247 次
发布时间:2019-06-22

本文共 3156 字,大约阅读时间需要 10 分钟。

hot3.png

1、先看效果图

141559_HPgk_3551274.png

(前7页)

141813_zxvy_3551274.png

(中间)

141627_VRN4_3551274.png

(后7页)

 

2、代码部分

其中 传参 和  跳转部分也就不说了----直接贴 CSS样式  和  后端代码

.wrap .page-box {  width: 100%;  position: relative;  height: 32px;  margin: 30px 0 40px 0;}.wrap .page-box .page {  position: absolute;  transform: translate(-50%, -50%);  left: 50%;  top: 50%;}.wrap .page-box .page a {  width: 30px;  height: 30px;  display: block;  line-height: 30px;  border: 1px solid #ccc;  box-sizing: border-box;  text-align: center;  float: left;  margin-right: 10px;  font-size: 13px;}.wrap .page-box .page a:last-child {  margin-right: 0;}.wrap .page-box .page a:hover {  background: #6cbef6;  border-color: #6cbef6;  color: #fff;  transition: all .5s;}.wrap .page-box .page a.on {  background: #6cbef6;  border-color: #6cbef6;  color: #fff;}.wrap .page-box .page a.no {  opacity: 0;  cursor: default;}

DIV整体结构图如下,但这里没有分页没有写在HTML中,写在了Java代码中,直接放到了前台

public class Pages {	public static final String ATTR_PAGE = "_page";	public static final String ATTR_TOTAL_PAGE ="_total_page";	public static final String ATTR_TOTAL_RECODE = "_total_recode";	private int page; // 当前页	private int totalPage; // 总页数	private int totalRecode; //总记录数	private String url; // 当前url,再参数	private String params;	private boolean useJSRequest;	private String pageStyle;	private static final int t = 7;  // 分页样式控制              //中间省却getter setter 和 各种调用代码    	/**	 * 新的分页Lee	 * page; 		// 当前页	 * totalPage; 	// 总页数	 * totalRecode; //总记录数	 * url; 		// 当前url,再参数	 */	private void writeNewPage(StringBuilder sb){		//总共页数		sb.append("

总条数:").append(totalRecode).append("条

"); //上一页 sb.append("
"); if (page <= 1) {//
"); }else{ sb.append("
"); } // 小于前7页时展现形式 if( page < t ){ //前7页的样式 for(int i = 1; i <= t ; i ++ ){ if( i > totalPage ) break; if(page == i){ sb.append("
"+page+""); }else{ sb.append("
"+i+""); } } //总页数大于7页,显示最后两页 if(totalPage>t+1){ sb.append("
... "); if(totalPage-2>=t){ int lastpage = (totalPage-1); sb.append("
"+lastpage+""); sb.append("
"+totalPage+""); }else{ sb.append("
"+totalPage+""); } } //大于7页小于总页数时的样式 }else if( page >= t ){ //显示前两页 :1 2 ... 中间页 ... n n+1 sb.append("
1"); sb.append("
2"); sb.append("
..."); if((totalPage-page)>=t){ for(int i = 1; i <= t; i ++ ){ if(i == 4){ sb.append("
"+page+""); }else{ sb.append("
"+(page-(4-i))+""); } } sb.append("
... "); int lastpage = (totalPage-1); sb.append("
"+lastpage+""); sb.append("
"+totalPage+""); //到后7页时的样式: 1 2 ... 后7页 }else{ int first = 0; if(totalPage-2>t){ first = totalPage -7; }else{ first = 3; } for(int i = 0; i <= t; i ++ ){ int x = first + i ; if( x > totalPage ) break; if( page == x ){ sb.append("
"+x+""); }else{ sb.append("
"+x+""); } } } } // 结尾 if(page
> "); }else{ sb.append("
"); } sb.append("
"); }}

 

转载于:https://my.oschina.net/u/3551274/blog/1491492

你可能感兴趣的文章
C#通过代码调用PowerShell
查看>>
c# MongoDB 经纬度应用示例
查看>>
C语言 · 特殊回文数
查看>>
Displaying Modal Window Messages in Oracle Forms Using Show_Alert
查看>>
如果一条SQL语句太长,我们可以通过回车键来创建一个新行来编写SQL语句,SQL语句的命令结束符为分号(;)。...
查看>>
CSRF攻击
查看>>
HTTP 请求头中的 X-Forwarded-For
查看>>
使用axis2 soapmonitor监控soap数据
查看>>
百度eCharts体验
查看>>
线程高级应用-心得9-空中网的三道面试题,考察应试者的线程掌握的深度
查看>>
新建一个兼容eclipse和myeclipse、IDEA都兼容的项目结构(maven)
查看>>
小程序二维码解码
查看>>
How To: Implement a Major Upgrade In Your Installer
查看>>
windows下使用redis
查看>>
SpringMVC整合Shiro
查看>>
水晶报表异常“CrystalDecisions.ReportSource.ReportSourceFactory”的类型初始值设定项引发异常,未能加载文件或程序集“log4net...
查看>>
Git详解之二 Git基础 转
查看>>
redis sentinel(哨兵机制)部署(Windows下实现)
查看>>
Apache配置虚拟目录和多主机头
查看>>
前端 JS,localStorage/sessionStorage、cookie 及 url 等实现前台数据共享、传输
查看>>